<template>
    <div class="container">
        <Header :left="true" title="推荐账户"></Header>
        
        <div class="box" style="padding:20px;margin-top:0;" >
            <div class="box-money-title" >账户余额（元）</div>
            <div class="box-money-info">¥ {{fMoney(null,null,account.recommendBalance)}}</div>
            <div style="padding:40px 0 0 0">
                <el-button type="primary" @click="toWithdrawDeposit" :disabled="account.recommendBalance <= 0"  style="width:100%">提现</el-button>
            </div>
        </div>

        <div class="box" style="display:flex;padding:20px;">
            <div class="m-info-item">
                ¥ {{fMoney(null,null,account.recommendAmount)}}
                <div class="m-info-desc">总佣金</div>
            </div>
            <div class="m-info-item">
                ¥ {{fMoney(null,null,account.recommendWithdrawAmount)}}
                <div class="m-info-desc">累计提现佣金</div>
            </div>

            <div class="m-info-item">
                ¥ {{fMoney(null,null,account.recommendWithdrawIngAmount)}}
                <div class="m-info-desc">已申请提现佣金</div>
            </div>
        </div>

        <div class="box">
            <div class="box-item" @click="toPage('/center/incomelist/2')">
                收入明细
                <img class="box-right-icon" src="/static/img/toright.png" />
            </div>
            <div class="box-item" @click="toPage('/center/withdraw/3')" >
                提现明细
                <img class="box-right-icon" src="/static/img/toright.png" />
            </div>
        </div>


    </div>
</template>
<script>
import Header from '../../common/Header.vue';
export default {
    components:{Header},
    data:function(){
        return {
            user:{
                avatar:'',
                name:'',
                phone:''
            },
            account:{
                balance:0,
            }
        };
    },
    created:function(){
        this.loadAccount();
    },
    methods:{
        loadAccount(){
            var that = this;
            that.$api.post('/channel/channelWithdrawDeposit/channelInfo.json',{}).then(data =>{
                if(data.data.code != '0'){
                    that.$message.error(data.data.msg);
                    return;
                }
                that.account = data.data.data;
            });
        },
        toWithdrawDeposit(){
            if(this.isBlank(this.account.trueName) || this.isBlank(this.account.alipayAccount)){
                this.toPage('/center/updateacccount');
                return ;
            }
            var info = {
                trueName:this.account.trueName,
                alipayAccount:this.account.alipayAccount,
                money:this.account.recommendBalance,
                transferType:'2'
            }
            localStorage.setItem('withdrawdepositinfo',JSON.stringify(info));
            // 提现页面
            this.toPage('/center/withdrawdeposit');
        }
    }
}
</script>
<style scoped>
    .container{
        width: 100%;min-height: 100%;
        background: #F2F6FC;
        padding: 20px;
        color:#303133;
    }
    .box{
        width: 100%;
        background: #fff;
        border-radius: 10px;
        position: relative;
        padding: 0 10px;
        margin-top:20px;
    }
    .box .box-item{
        padding: 15px 5px;
        border-bottom: 1px solid #E4E7ED;
        position: relative;
    }
    .box .box-item:last-child{
        border-bottom: none;
    }
    .box .box-item .box-right-icon{
        position: absolute;
        top:0;bottom: 0;
        margin: auto;
        right: 10px;
        width: 20px;
        height: 20px;
    }
    .box-money-title{
        width: 100%;
        padding: 10px 0;
        text-align: center;
    }
    .box-money-info{
        width: 100%;
        text-align: center;
        font-size: 28px;
    }
    .m-info-item{
        flex: 1;
        font-size: 20px;
        text-align:center;
    }
    .m-info-desc{
        width: 100%;
        font-size: 12px;
        color: #606266;
        margin-top: 10px;
    }
    
</style>
